import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import { visualizer } from 'rollup-plugin-visualizer'
import { Plugin as importToCDN } from 'vite-plugin-cdn-import'

export default defineConfig({
  plugins: [
    vue(),
    importToCDN({
      modules: [
        {
          name: 'vue',
          var: 'Vue',
          path: 'https://s4.zstatic.net/ajax/libs/vue/3.5.13/vue.global.js'
        },
        {
          name: 'vue-router',
          var: 'VueRouter',
          path: 'https://s4.zstatic.net/ajax/libs/vue-router/4.5.0/vue-router.global.js'
        },
        {
          name: 'element-plus',
          var: 'ElementPlus',
          path: 'https://s4.zstatic.net/ajax/libs/element-plus/2.8.8/index.full.js',
          css: 'https://s4.zstatic.net/ajax/libs/element-plus/2.8.8/index.css'
        },
        {
          name: '@element-plus/icons-vue',
          var: 'ElementPlusIconsVue',
          path: 'https://s4.zstatic.net/ajax/libs/element-plus-icons-vue/2.3.1/index.iife.min.js'
        }
      ]
    }),
    createSvgIconsPlugin({
      // 指定 SVG图标 保存的文件夹路径
      iconDirs: [fileURLToPath(new URL('src/assets/icons', import.meta.url))],
      // 指定 使用svg图标的格式
      symbolId: 'icon-[dir]-[name]'
    }),
    visualizer({
      open: true,
      filename: 'visualizer.html'
    }),
    vueDevTools()
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  build: {
    rollupOptions: {
      // 仅外部化这些依赖
      external: ['vue', 'vue-router', 'element-plus', '@element-plus/icons-vue']
    }
  }
})
